<template>
	<div :class="['text-wrap', { row: !!row }]"></div>
</template>

<script setup lang="ts" name="CText">
import { watch } from 'vue'

// 默认值
const prop = defineProps<{
	row?: number // 超出部分省略号，不传和0表示空
}>()
watch(
	() => prop.row,
	() => {
		document.getElementsByTagName('body')[0].style.setProperty('--text-row', (prop.row ?? 0) + '')
	},
	{
		immediate: true
	}
)
</script>
<style scoped lang="scss">
$row: var(--text-row, 1);
.text-wrap {
	// 默认行内块集
	&.row {
		display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
		overflow: hidden;
		text-overflow: ellipsis; // 溢出显示省略号
		word-break: break-all; /* 纯英文换行 */
		-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: $row; /* 行，只有 webkit内核支持 */
	}
}
</style>
